<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox wdh-100 info-box">
			<view class="wdh-100 info-title">身份证照片</view>
			<view class="wdh-100 info-desc">证件需内容完整，图像清晰，真实且在有效期内</view>
			<view class="rowbox wdh-100 spb" style="margin-top: 40rpx;">
				<view class="columnbox one-pic" @click="addImg(1)">
					<image v-if="cardr==''" src="/static/img/sfzr.png" mode="widthFix"></image>
					<image v-else :src="cardr" mode="aspectFill"></image>
					上传身份证人像页
				</view>
				<view class="columnbox one-pic" @click="addImg(2)">
					<image v-if="cardg==''" src="/static/img/sfzg.png" mode="widthFix"></image>
					<image v-else :src="cardg" mode="aspectFill"></image>
					上传身份证国徽页
				</view>
			</view>
			<view class="wdh-100 info-title" style="margin-top: 40rpx;">身份信息</view>
			<view class="rowbox wdh-100 jus one-info">
				<view class="info-name">真实姓名</view>
				<input v-model="form.name" placeholder="请输入姓名" />
			</view>
			<view class="rowbox wdh-100 jus one-info">
				<view class="info-name">身份证号</view>
				<input v-model="form.idNumber" placeholder="请输入身份证号" />
			</view>
			<view class="rowbox wdh-100 jus one-info">
				<view class="info-name">手机号</view>
				<input v-model="form.phonenumber" placeholder="请输入手机号" />
			</view>
			<view class="rowbox wdh-100 jus one-info">
				<view class="info-name">有效期</view>
				<uni-datetime-picker @change='chooseDate' v-model="range" type="daterange" start="1910-3-20"
					rangeSeparator="至" />
				<!-- <input v-model="form.validPeriod" placeholder="请选择有效期" /> -->
			</view>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box">
			<view class="rowbox pay-btn" @click="submitInfo">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: [],
				curdate: '',
				show: true,
				cardr: '',
				cardg: '',
				form2: {
				}, //对比
				form: {
					name: '',
					idNumber: '',
					validPeriod: '',
					phonenumber: '',
					time: ''
				},
				submitflag: false
			};
		},
		onLoad() {
			var date = new Date()
			this.curdate = date.getFullYear() + '-' + (date.getMonth() + 1 > 9 ? date.getMonth() + 1 : ('0' + (date
				.getMonth() + 1))) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
		},
		methods: {
			// 上传图片接口
			sendImg(url, index) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {

						resolve(res.data.url)

					})
				})
			},
			chooseDate() {
				this.form.validPeriod = this.range.join(',').replace(/-/g, '.').replace(/,/g, '-')
			},
			chooseCardR() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title: ''
						})
						this.$req.uploadImg(res.tempFilePaths[0]).then(res => {
							this.cardr = res.data.url
							this.$req.post('/xcx/user/ocr/face?url=' + res.data.url, {
								url: res.data.url
							}).then(res => {
								this.form.name = res.data.data.name
								this.form.idNumber = res.data.data.idNumber
								uni.hideLoading()
							})
						})
					}
				})
			},
			chooseCardG() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title: ''
						})
						this.$req.uploadImg(res.tempFilePaths[0]).then(res => {
							this.cardg = res.data.url
							this.$req.post('/xcx/user/ocr/back?url=' + res.data.url, {
								url: res.data.url
							}).then(res => {
								this.range = res.data.data.validPeriod.split('-')
								this.form.validPeriod = res.data.data.validPeriod
								uni.hideLoading()
							})
						})
					}
				})
			},
			async addImg(index) {
				let that = this;
				uni.chooseImage({

					success: (res) => {
						this.$modal.loading('加载中');
						console.log(res)
						that.sendImg(res.tempFilePaths[0]).then(ms => {
							// 进行验证
							that.changeOcr(ms, index);

						})
					}
				})
			},
			// 证件识别
			changeOcr(url, index) {
				let data = {
					url: url
				}
				console.log(data)
				this.$req.post('/verify/ocrInfo', data).then(res => {
					this.$modal.closeLoading()
					console.log(res);
					if (res.data.code == 200) {

						if (index == 1) {
							this.cardr = url;
							this.form2 = res.data.data;
						} else {
							this.cardg = url;
							this.form.time = res.data.data.validPeriod
						}
					} else {
						this.$modal.msg(res.data.msg)
					}

				})
			},
			submitInfo() {
				if (this.cardr == '') {
					uni.showToast({
						title: '请上传身份人像页',
						icon: 'none'
					})
					return false
				}
				if (this.cardg == '') {
					uni.showToast({
						title: '请上传身份证国徽页',
						icon: 'none'
					})
					return false
				}
				if (this.form.name == '') {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return false
				}
				if (this.form.idNumber == '') {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					})
					return false
				}
				if (this.form.validPeriod == '') {
					uni.showToast({
						title: '请输入有效期',
						icon: 'none'
					})
					return false
				}
				if (this.form.phonenumber == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}

				if (this.form2.name != this.form.name) {
					this.$modal.msg('身份证名字应与填写的一致');
					return false
				}
				if (this.form2.idNumber != this.form.idNumber) {
					this.$modal.msg('身份证号应与填写的一致');
					return false
				}
				if (!this.submitflag) {
					uni.showLoading({
						title: ''
					})
					this.submitflag = true
					let data = {
						idNumber: this.form.idNumber,
						realName: this.form.name,
						phonenumber: this.form.phonenumber,
						faceUrl: this.cardr,
						backUrl: this.cardg,
						validPeriod: this.form.time
					}
					console.log(data)
					this.$req.post('/verify/mobile3MetaVerify', data).then(res => {
						console.log(res)
						this.submitflag = false
						uni.hideLoading()
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 200) {
							let pages = getCurrentPages(); //获取所有页面栈实例列表
							let nowPage = pages[pages.length -
								1]; //当前页页面实例
							let prevPage = pages[pages.length -
								2]; //上一页页面实例
							prevPage.$vm.refreshflag = true
							uni.navigateBack()
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {}

	.info-box {
		padding: 0 20rpx;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.info-desc {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.one-pic {
		color: #999999;
		font-size: 28rpx;

		image {
			margin-bottom: 20rpx;
			width: 342rpx;
			height: 200rpx;
		}
	}

	.one-info {
		padding: 32rpx 0;
		border-bottom: #f1f3f7 solid 1px;

		input {
			font-size: 28rpx;
		}
	}

	.info-name {
		font-size: 28rpx;
		width: 150rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 10rpx;
		width: 100%;
		height: 90rpx;
	}
</style>